<template>
  <view>
    <block v-if="!loadingPage">
      <x-skeleton
        type="list"
        :loading="true"
        v-for="(item, index, key) in 10"
        :key="key"
      >
        <view>列表</view>
      </x-skeleton>
    </block>
    <view class="bulletinModule" v-if="loadingPage">
      <view
        class="list flex"
        v-for="(item, index, key) in list"
        @click="gourl(`/pages/bulletin/detail?id=${item.id}`)"
        :key="key"
      >
        <image :src="item.img" class="img" mode="aspectFill"></image>
        <view class="block1">
          <view class="title c1F1F1F f28 fontWeight ellipsis1">
            {{ item.title }}
          </view>
          <view class="time c525252 f24">
            {{ item.createTime }}
          </view>
        </view>
      </view>
    </view>
    <nodata v-if="list.length == 0" />
    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import { bulletinPage, updateParent } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go } from "@/utils/wxAPI";
import { getGloBalData, getToken } from "../../utils/storage";
import { handleLoopCallBack } from "../../utils/util";
export default {
  data() {
    return {
      loadingPage: false,
      total: 0,
      list: [],
      current: 1,
      options: {},
    };
  },
  async onLoad(options) {
    this.options = options;
    if (getToken()) {
      this.handleBulletinPage();
      if (this.options.uid) {
        updateParent({
          id: this.options.uid,
        });
      }
    } else {
      handleLoopCallBack(async () => {
        this.handleBulletinPage();
        if (this.options.uid) {
          updateParent({
            id: this.options.uid,
          });
        }
      });

      // #ifdef H5
      if (getEnv() == "H5") {
        uni.reLaunch({
          url: "/pages/login/login",
        });
      }
      // #endif
    }
  },
  methods: {
    async handleBulletinPage() {
      loading();
      let { data } = await bulletinPage({
        current: this.current,
        size: 10,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },

    gourl(url) {
      go(url);
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.handleBulletinPage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.handleBulletinPage();
  },

  onShareAppMessage: function (e) {
    return {
      title: "公告列表",
      path: `/pages/bulletin/bulletin?uid=${getGloBalData("userinfo").id}`,
    };
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.bulletinModule {
  margin: 30rpx 30rpx 0;
  background: #fff;
  border-radius: 28rpx;
  padding: 40rpx 24rpx 0;

  .list {
    padding: 0 0 45rpx 0;

    .img {
      width: 162rpx;
      height: 92rpx;
      border-radius: 16rpx;
    }

    .block1 {
      width: calc(100% - 162rpx - 20rpx);
      margin-left: 20rpx;
      padding: 0 0 24rpx 0;
      border-bottom: 1px solid #f5f5f5;

      .title {
      }

      .time {
        margin: 16rpx 0 0;
      }
    }
  }
}
</style>
